<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>23D转换</title>
    <link rel="stylesheet" href="css/reset.css" />
    <style>
      .div1 {
        width: 200px;
        height: 200px;
        background-color: red;

        /* 移动方式一: 外边距(影响其他元素布局) */
        /* margin: 200px; */

        /* 移动方式二: 定位(可能影响,可能不影响,根据定位模式来决定) */
        /* position: relative;
        top: 200px;
        left: 200px; */

        /* 移动方式三: CSS3的2D转换(不不影响其他元素布局) */

        /* 转换效果1: 移动 */
        /* transform: translateX(200px);
        transform: translateY(200px); */
        /* transform: translate(200px, 200px); */

        /* 
          转换效果2: 旋转
          单位: 角度deg
        */
        /* transform: rotate(45deg); 2D旋转 */
        /* 3D旋转 */
        /* transform: rotateX(45deg); */
        /* transform: rotateY(45deg); */

        /* 转换效果3: 缩放 */
        /* transform: scaleX(2); */
        /* transform: scale(2, 2); */

        /* 转换效果4: 拉伸 */
        /* transform: skew(30deg, 15deg); */

        /* 复合属性 */
        transform: translateX(400px) rotate(-15deg) skew(30deg, 15deg);
      }

      .div2 {
        width: 250px;
        height: 250px;
        background-color: green;
      }

      img:hover {
        /* transform: translate(200px, 200px); */
        transform: rotateX(180deg);
        /* transform: scale(2, 2); */
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <!-- <div class="div2"></div> -->

    <img src="img/lunbo.png" alt="" />
  </body>
</html>
